<template>
  <div class="evaluate">
    <div class="evaluate-li" v-for="(v, i) in tableData" :key="v.id">
      <div class="img-box">
        <img class="head-img" :src="headImg(v.sysUser)" alt="" />
      </div>
      <div class="review-info">
        <div class="username">
          <h4>{{ v.sysUser.userName }}</h4>
          <el-rate
            v-model="v.score"
            disabled
            text-color="#ff9900"
            score-template="{value}"
            class="score"
          >
          </el-rate>
        </div>
        <p class="review-content">{{ v.content }}</p>
        <div class="review-btn">
          <span class="li-data">{{ v.createTime }}</span>
          <p class="reply-btn" @click="handleReply(i)">
            <span class="el-icon-chat-square"></span>
            <i v-show="replyIdx != i"> 回复</i>
            <i v-show="replyIdx == i"> 取消回复</i>
          </p>
          <p class="reply-btn" v-if="deleteShow" @click="handleDelete(v)">
            <span class="el-icon-circle-close"></span>
            <i> 删除</i>
          </p>
          <p class="reply-btn" @click="handleLook(v)">
            <span class="el-icon-view"></span>
            <i v-show="replyShow != v.id">
              查看回复 ({{ v.childList.length }})</i
            >
            <i v-show="replyShow == v.id">
              收起回复 ({{ v.childList.length }})</i
            >
          </p>
        </div>
        <Reply v-if="replyIdx == i" :replyData="v" />
        <div v-if="v.childList.length">
          <el-collapse-transition>
            <div v-show="replyShow == v.id">
              <div class="reply-box" v-for="m in v.childList" :key="m.id">
                <div class="reply-img-box">
                  <img class="head-img" :src="headImg(m.sysUser)" alt="" />
                </div>
                <div class="reply-info">
                  <div class="username">
                    <h4>{{ m.sysUser.userName }}</h4>
                  </div>
                  <p class="review-content">{{ m.content }}</p>
                  <p class="reply-data">{{ m.createTime }}</p>
                  <p
                    class="reply-delete"
                    v-if="deleteShow"
                    @click="handleDelete(m)"
                  >
                    <span class="el-icon-circle-close"></span>
                    <i> 删除</i>
                  </p>
                </div>
              </div>
            </div>
          </el-collapse-transition>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
  </div>
</template>
<script>
import { sysEvaluateDelete } from '@/api/home/sysEvaluate.js'
import Bus from '@/utils/bus.js'
import setInfo from '@/mixins/setInfo'
export default {
  mixins: [setInfo],
  components: {
    Reply: () => import('./Reply.vue'),
  },
  data() {
    return {
      replyIdx: '-1',
      replyShow: '-1',
    }
  },
  props: ['tableData', 'deleteShow'],
  methods: {
    handleReply(idx) {
      // 预览模式不触发事件
      if (this.$route.query.queryMode == 2) {
        this.previewTip()
        return
      }
      //判断是否登录
      if (!this.$store.getters.userId) {
        this.loginTip()
        return
      }
      if (this.replyIdx != idx) {
        this.replyIdx = idx
      } else {
        this.replyIdx = -1
      }
    },
    handleLook(v) {
      if (!v.childList.length) return
      if (this.replyShow != v.id) {
        this.replyShow = v.id
      } else {
        this.replyShow = -1
      }
    },
    //删除确认
    handleDelete(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    //删除
    delete(row) {
      sysEvaluateDelete(row.id).then((res) => {
        Bus.$emit('refreshReviewList')
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
  },
}
</script>
<style scoped lang="scss" >
.evaluate {
  .evaluate-li {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    .reply-img-box,
    .img-box {
      position: absolute;
      left: 0;
      top: 10px;
      width: 50px;
      height: 50px;
      text-align: center;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #eee;
        display: inline-block;
      }
    }
    .reply-info,
    .review-info {
      padding-left: 60px;
      width: 100%;
      box-sizing: border-box;
      .username {
        height: 20px;
        .score {
          float: left;
        }
        h4 {
          float: left;
          line-height: 20px;
          margin-right: 15px;
          font-size: 14px;
          color: #333;
        }
      }
      .review-content {
        clear: both;
        padding: 10px 0;
        line-height: 1.5;
        font-size: 14px;
        color: #666;
      }
    }
    .review-btn {
      .reply-btn {
        float: right;
        margin-left: 10px;
        color: #333;
        cursor: pointer;
        &:hover {
          color: var(--colorH1);
        }
      }
    }
    .reply-box {
      position: relative;
      width: 100%;
      margin-top: 10px;
      border-top: 1px solid #f5f5f5;
      .reply-info {
        position: relative;
        padding-top: 10px;
        .reply-data {
          color: #999;
        }
        .reply-delete {
          position: absolute;
          right: 0;
          bottom: 10px;
          cursor: pointer;
          &:hover {
            color: var(--colorH1);
          }
        }
      }
    }
  }
}
</style>